<template>
  <div>
    <div class="header">
      <div class="hLeft">
        <div class="leftImg">
          <img src="../../../public/images/car01.jpg" alt="" />
        </div>
      </div>
      <div class="hRight">
        <div class="title">
          <span>大车来了</span>
        </div>
        <span>DaCheLaiLe</span>
      </div>
      <div class="typeList">
        <ul>
          <li><router-link to="/home">首页</router-link></li>
          <li>公司动态</li> 
          <li>产品服务</li>
          <li><router-link to="/about">关于我们</router-link></li>
        </ul>
      </div>
      <div class="call">
        <div class="callLeft">
          <img src="../../../public/images/call.png" alt="">
        </div>
        <div class="callRight">
          <span id="span1">全国统一服务热线</span>
          <span id="span2">022-59120382</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="less" scoped>
body{
  // position: relative;
.header {
  // position: sticky;
  width: 1200px;
  height: 100px;
  // background: #eee;
  margin: 20px auto;
  position: relative;
  .hLeft {
    width: 200px;
    height: 100px;
    // background: skyblue;
    display: flex;
    align-items: center;
    .leftImg {
      width: 89px;
      height: 71px;
      background: snow;
      margin-left: 15px;
      img {
        display: inline-block;
        width: 89px;
        height: 71px;
      }
    }
  }
  .hRight {
    position: absolute;
    left: 110px;
    top: 20px;
    width: 80px;
    height: 60px;
    .title {
      width: 80px;
      height: 40px;
      span {
        font: 20px "Adobe 宋体";
      }
    }
    span {
      font: 14px "Adobe 宋体";
    }
  }
  .typeList {
    width: 470px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 200px;
    ul {
      li {
        font: 16px "Adobe 宋体";
        float: left;
        line-height: 100px;
        margin-right: 60px;
      }
    }
  }
  .call{
    position: absolute;
    top: 0;
    right: 0;
    // background: skyblue;
    width: 165px;
    height: 100px;
    display: flex;
    align-items: center;
    .callRight{
      margin-left: 5px;
      #span1{
        position: absolute;
        top: 20px;
        left: 38px;
        font: 12px "Adobe 宋体";
      }
      #span2{
        font: 18px "Adobe 宋体";
      }
    }
  }
}
}

</style>
